import { View, Text } from 'react-native'
import React from 'react'
import { SelectOptionButton } from 'app/components/SelectableOption'
import { styles } from '../styles'
import { setEndTime } from 'app/redux/slices/createAppointmentSlice'
import { useAppDispatch, useAppSelector } from 'app/redux/hooks'
import { AntDesign } from '@expo/vector-icons'

type Params={
    onPressStartTime:()=>void
}

const DateView = ({onPressStartTime}:Params) => {
    //Hooks
  const dispatch = useAppDispatch()
  const appointmentState = useAppSelector((state) => state?.createAppointment)


  return (
    <>
          <View style={{ paddingTop: 5, flexDirection: "row" }}>
            <View style={{ flex: 1, marginRight: 5 }}>
              <Text style={styles.label}>Start Time</Text>
              <SelectOptionButton
                selectedText={appointmentState?.startTime ? appointmentState?.startTime : "Date"}
                onPress={onPressStartTime}
                icon={<AntDesign name="calendar" size={24} color="black" />}
              />
            </View>
            <View style={{ flex: 1, marginLeft: 5 }}>
              <Text style={styles.label}>End Time</Text>
              <SelectOptionButton
                selectedText={appointmentState?.endTime ? appointmentState?.endTime : "Date"}
                onPress={() =>{}
                //   setDates((prev) => {
                //     return {
                //       ...prev,
                //       type: "end",
                //       show: !prev?.show,
                //     }
                //   })
                }
                icon={<AntDesign name="calendar" size={24} color="black" />}
              />
            </View>
          </View>
          {/* {(error && !appointmentState?.startTime) || !appointmentState?.endTime ? (
            <Text style={{ color: "red", marginTop: scale(2) }}>{error}</Text>
          ) : null} */}
        </>
  )
}

export default DateView